<template>
  <div class="app-container">
    <div class="flex_box btns">
      <p class="all">全部用户（{{user_count+company_count}}）</p>
      <p class="btn" @click='tabChange(0)' :class="index==0?'cur':''">个人用户（{{user_count}}）</p>
      <p class="btn" @click='tabChange(1)' :class="index==1?'cur':''">企业用户（{{company_count}}）</p>
    </div>
    <myTaskUser v-if="index==0" :dataCount='dataCount'></myTaskUser>
    <myTaskCompany v-else :dataCount='dataCount'></myTaskCompany>
  </div>
</template>

<script>
import myTaskUser from '../components/myTaskUser'
import myTaskCompany from '../components/myTaskCompany'
export default {
  name: 'Index',
  data() {
    return {
      url:'/task/admin/getTaskData',
      index:'0',
      user_count:0,
      company_count:0,
      dataCount:{}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    tabChange(index) {
      this.index = index
    },
    // 获取任务管理数据
    getList() {
      this.$http.get(this.url).then(response => {
        if (response.code == 10000) {
          let data = response.data
          this.dataCount = data
          if (data) {
            this.user_count = data.user_count
            this.company_count = data.company_count
          }
        }
      })
    },
  },
  components:{
    myTaskCompany,
    myTaskUser
  }
}
</script>
<style lang="scss" scoped>
  @import '~@/styles/element-variables.scss';
  .btns{
    margin-bottom:26px;
  }
  .all{
    margin-right: 20px;
  }
  .btn{
    width: 220px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-right:-1px;
    cursor: pointer;
    border:1px solid #e1e1e1;
  }
  .btn.cur{
    background:$--color-warning;
    color: #fff;
  }
</style>